<template>
  <a-modal
    :title="title"
    :width="1400"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :bodyStyle="{ padding: '24px' }"
  >
    <a-spin :spinning="confirmLoading">
      <!-- 入库单基本信息卡片 -->
      <a-card title="入库单基本信息" :bordered="false" class="detail-card">
        <template slot="extra">
          <a-tag :color="getStatusColor(model.inboundStatus)" class="status-tag">
            {{ model.inboundStatusName || '未知状态' }}
          </a-tag>
        </template>
        <a-row :gutter="24">
          <a-col :span="8">
            <div class="info-item">
              <span class="info-label">入库单号</span>
              <span class="info-value">{{ model.inboundNo || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="info-item">
              <span class="info-label">订单号</span>
              <span class="info-value">{{ model.orderNo || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="info-item">
              <span class="info-label">入库日期</span>
              <span class="info-value">{{ model.inboundDate || '-' }}</span>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 16px">
          <a-col :span="8">
            <div class="info-item">
              <span class="info-label">客户名称</span>
              <span class="info-value">{{ model.customerName || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="info-item">
              <span class="info-label">项目名称</span>
              <span class="info-value">{{ model.projectName || '-' }}</span>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 16px">
          <a-col :span="8">
            <div class="info-item">
              <span class="info-label">总数量</span>
              <span class="info-value highlight">{{ model.totalQuantity || 0 }} 件</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="info-item">
              <span class="info-label">操作员</span>
              <span class="info-value">{{ model.operatorName || '-' }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="info-item">
              <span class="info-label">创建时间</span>
              <span class="info-value">{{ model.createTime || '-' }}</span>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 16px" v-if="model.remark">
          <a-col :span="24">
            <div class="info-item">
              <span class="info-label">备注</span>
              <span class="info-value">{{ model.remark }}</span>
            </div>
          </a-col>
        </a-row>
      </a-card>

      <!-- 入库明细卡片 -->
      <a-card title="入库明细" :bordered="false" class="detail-card" style="margin-top: 24px">
        <template slot="extra">
          <a-tag color="blue">共 {{ detailList.length }} 项</a-tag>
        </template>
        <a-table
          :columns="detailColumns"
          :dataSource="detailList"
          :pagination="false"
          size="middle"
          bordered
          rowKey="id"
          :scroll="{ x: 1200 }"
        >
          <template slot="qualityStatus" slot-scope="text">
            <a-tag v-if="text === 0" color="orange">待检</a-tag>
            <a-tag v-else-if="text === 1" color="green">合格</a-tag>
            <a-tag v-else-if="text === 2" color="red">不合格</a-tag>
            <span v-else>-</span>
          </template>
          <template slot="windowInfo" slot-scope="text, record">
            <div class="window-info">
              <div>
                <strong>{{ record.windowSeries }}</strong>
              </div>
              <div class="text-muted">{{ record.windowNo }}</div>
              <div class="text-muted">{{ record.windowColor }}</div>
            </div>
          </template>
          <template slot="quantity" slot-scope="text, record">
            <div class="quantity-info">
              <div>
                计划: <span class="text-blue">{{ record.plannedQuantity || 0 }}</span>
              </div>
              <div>
                实际: <span class="text-green">{{ record.actualQuantity || 0 }}</span>
              </div>
            </div>
          </template>
        </a-table>
      </a-card>
    </a-spin>
  </a-modal>
</template>

<script>
import { getInboundDetail } from '@/api/wms/finishedGoodsInbound'

export default {
  name: 'InboundDetailModal',
  data() {
    return {
      title: '入库单详情',
      visible: false,
      confirmLoading: false,
      model: {},
      detailList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
      detailColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '门窗信息',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'windowInfo' },
        },
        {
          title: '数量信息',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'quantity' },
        },
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'warehouseName',
          width: 120,
        },
        {
          title: '库位',
          align: 'center',
          dataIndex: 'locationName',
          width: 120,
        },
        {
          title: '批次号',
          align: 'center',
          dataIndex: 'batchNo',
          width: 150,
        },
        {
          title: '质量状态',
          align: 'center',
          dataIndex: 'qualityStatus',
          width: 100,
          scopedSlots: { customRender: 'qualityStatus' },
        },
      ],
    }
  },
  methods: {
    show(record) {
      this.visible = true
      this.confirmLoading = true

      // 获取入库单详情
      getInboundDetail(record.id)
        .then((res) => {
          if (res.success) {
            this.model = res.result
            this.detailList = res.result.detailList || []
          } else {
            this.$message.error(res.message || '获取详情失败')
          }
          this.confirmLoading = false
        })
        .catch((err) => {
          this.$message.error('获取详情失败：' + err.message)
          this.confirmLoading = false
        })
    },
    handleOk() {
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
      this.model = {}
      this.detailList = []
    },
    getStatusColor(status) {
      const statusColorMap = {
        0: 'orange', // 待入库
        1: 'blue', // 入库中
        2: 'green', // 已完成
        3: 'red', // 已取消
      }
      return statusColorMap[status] || 'default'
    },
  },
}
</script>

<style scoped>
.detail-card {
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-card .ant-card-head {
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.info-item {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
}

.info-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.info-value.highlight {
  color: #1890ff;
  font-size: 16px;
}

.status-tag {
  font-weight: 600;
  font-size: 13px;
}

.window-info {
  text-align: left;
}

.window-info > div {
  margin-bottom: 2px;
}

.quantity-info {
  text-align: left;
}

.quantity-info > div {
  margin-bottom: 2px;
}

.text-muted {
  color: #999;
  font-size: 12px;
}

.text-blue {
  color: #1890ff;
  font-weight: 600;
}

.text-green {
  color: #52c41a;
  font-weight: 600;
}

.ant-table-tbody > tr > td {
  padding: 12px 8px;
}

.ant-table-thead > tr > th {
  background: #fafafa;
  font-weight: 600;
}

.ant-modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-item {
    padding: 8px 0;
  }

  .info-label {
    font-size: 11px;
  }

  .info-value {
    font-size: 13px;
  }
}
</style>
